<template>
	<view class="memer_lsiat">
		<view class="memberlist">
			<view v-for="(item,index) in memberlist" :key="index" @click="InterviterCat(item)" :class="{Thegray : item.status == 4}" class="member_listss">
				<image :src="item.map.userinfo.avatar" mode="" style="background: #666666;"></image>
				<view class="local_time">
					<image :src="item.map.userinfo.background_pic"></image>
					<view >{{item.local_time}}</view>
				</view>
				
				<view class="member_info">
					<view>
						<view class="member_name">{{item.map.userinfo.nick_name}}</view>
						<view v-if="item.map.userinfo.sex == '1'">
							<image src="../../../static/xingbie_nan.png" class="member_sex"></image>
						</view>
						<view v-if="item.map.userinfo.sex == '2'">
							<image src="../../../static/woman.png" class="member_sex"></image>
						</view>
						<view class="member_identity">{{item.map.userinfo.overseas_identity_name}}</view>
					</view>					
					<view class="member_language">掌握语言:{{item.map.userinfo.languages}}</view>
					<view class="member_city">{{item.map.userinfo.country}}·{{item.map.userinfo.city}}</view>
				</view>
				<view v-if="item.status == '4'" class="online_state">
					<view>离线</view>
				</view>
				<view v-else-if="item.status== '1'" class="online_state">
					<view>在线</view>
				</view>
			</view>
		</view>
		<view class="PuoPo" v-if="IsPopu" @tap="ClosePopu">
			<view class="PuoPo-content" v-for="(item,index) in ClassListInfo" :key="index" catchtap="">
				<image :src="item.map.userinfo.avatar" class="Popo-avatar"></image>
				<text>{{item.map.userinfo.nick_name}}</text>
				<view class="Pupo-Address">
					<view>
						<image  v-if="item.map.userinfo.sex == 2" src="../../../static/index/woman_selected02.png"></image>
						<image v-else src="../../../static/filter/man_unselect.png"></image>
						<view>25</view>
						<image src="../../../static/wode/local.png"></image>
						<view>{{item.map.userinfo.country}}·{{item.map.userinfo.hometown}}</view>
					</view>
				</view>
				<view class="signature">
					<view v-if="item.map.userinfo.intro == ''">暂未更新签名</view>
					<view v-else>{{item.map.userinfo.signature}}</view>
				</view>
				<view class="Gift-Addfriend">
					<view @tap="SendGift">
						<image src="../../../static/giftinfo/Thegifts.png"></image>
						<text>送礼物</text>
					</view>
					<view @tap="Addbuddy">
						<image src="../../../static/giftinfo/Addfriends.png"></image>
						<text>加好友</text>
					</view>
				</view>
				<view v-if="item.map.userinfo.is_help" class="IShelp">
					<view @tap="Personal(item)">
						<image src="../../../static/giftinfo/myInfo.png"></image>
						<text>个人详情</text>
					</view>
					<view @tap="HelpStudDetail">
						<image src="../../../static/giftinfo/HelpInfo.png"></image>
						<text>助学师详情</text>
					</view>
					<view @tap="ToLivein">
						<image src="../../../static/giftinfo/WeekInfo.png"></image>
						<text>直播讲师详情</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--赠送礼物弹窗-->
		<view v-if="IsGift" class="IsGift" @tap="CloseFift">
			<view class="GiftInfo" catchtap="">
				<view class="GiftInfo-header">
					<view class="GiftInfo-headerchlid">猫币剩余:{{cat_coin}}</view>
					<view class="GiftInfo-headerchlid">礼物</view>
					<image src="../../../static/diqiuquan/wenti.png" mode="" class="GiftInfo-headerchlid"></image>
				</view>
				<scroll-view scroll-x="true" class="GiftInfos">
					<block v-for="(item,index) in GiftList" :key="index"  >
						<view class="GiftInfos-child" :class="{Giftactive : GiftListIndex == index}" @tap="SelectGift(item,index)">
							<view class="GiftInfos-pic">
								<image :src="item.pic" mode=""></image>
							</view>
							<text class="GiftInfos-title">{{item.gift_name}}</text>
							<text class="GiftInfos-title">猫币X{{item.amount}}</text>
						</view>
					</block>
				</scroll-view>
				<view class="SendButon">
					<input type="number" @input="GetInputValue"/>
					<view @tap="sendGiftToStudent">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberlist:[],
				time:'',
				roomID:'',
				groupId:'',
				IsHost:'',
				ClassListInfo:[],//学员详细信息列表,
				IsPopu:false,//学员信息弹窗是否显示
				IsGift:false,//礼物是否显示
				GiftList:[],//可送礼物列表
				cat_coin:'',//猫币数量
				GiftListIndex:'',//给选中的礼物添加样式
				GiftInfoSend:[],//选中礼物信息
				GetValue:'',//输入的礼物数量
				payment_id:'',//收礼物人id
				pay_id:'',
				url:'',
				NumberOf:'',//免费加好友次数
			}
		},
		onLoad(options) {
			this.option = options
			this.roomID = options.group_id //直播间群号
			this.groupId = options.roomID
			this.IsHost = options.IsHost
		},
		onShow:function(){
			this.getmemebrlist()
		},
		onUnload() {
			this.memberlist = []
		},
		methods: {
			getmemebrlist(){
				let _this = this
				console.log(_this.groupId,549826)
				if(_this.groupId.length>7){
					var data  ={
						group_id:_this.roomID,
					}
				}else{
					var data  ={
						group_id:_this.groupId,
					}
				}
				this.myAjaxNew({//获取成员列表
					model: 'message',
					controllerName: 'messageJoinGroup',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						_this.memberlist = _this.memberlist.concat(res.data.data)
						console.log(_this.memberlist,'排序前的')
						_this.memberlist.map(item=>{//把后台给的时间戳转化成具体的时间
							var date = item.map.userinfo.local_time,y,m,d,h,mm,s;
							date = new Date(date);
							y = 1900 + date.getYear();
							m = "0" + (date.getMonth()+1);
							d = "0" + date.getDate();
							h = "0" + date.getHours();
							mm = "0" +  date.getMinutes();
							s = "0" +  date.getSeconds();
							date =  h.substring(h.length-2, h.length) + ":" + mm.substring(mm.length-2, mm.length);
							item.local_time=date
						})
						const handle = (property) => {
						    return function(a,b){
						        const val1 = a[property];
						        const val2 = b[property];
						        return val1 - val2;
							}
						}
						_this.memberlist.sort(handle('status'));//排序处理在线的在前离线的在后
						console.log(_this.memberlist,'排序后的')
					}
						
				})
			},
			InterviterCat(e){
				console.log(e,'我邀请你连麦了啊')
				if(this.IsHost){
					if(e.status == 4){//不在线无法邀请
						uni.showToast({
							title:'当前观众不在线',
							icon:'none'
						})
					}else if(e.status == 1){//在线可以邀请连麦
						const pages = getCurrentPages()
					    const prevPage = pages[pages.length-2] // 上一页
					    // 调用上一个页面的setData 方法，将数据存储
					    prevPage.setData({
					      IsInterview: true,
						  user_id:e.user_id
					    })
						uni.navigateBack({
							delta:1
						})
					}
				}else{
					let _this = this
					_this.ClassListInfo.push(e)//把对象转成数组遍历
					_this.IsPopu = true
					_this.payment_id = _this.ClassListInfo[0].map.userinfo.user_id
					_this.url = _this.ClassListInfo[0].map.userinfo.url
					console.info(_this.ClassListInfo,'99090')
				}
				
			},
			ClosePopu(){
				this.IsPopu = false
				this.ClassListInfo = []
			},
			Personal(e){//前往学员详情页面
				var _this = this
				var urls= encodeURIComponent(_this.url)
				uni.navigateTo({
					url: '/pages/Other/web-view/web-view?url=' +urls,
					success:function(){//清除成员列表防止回来重复
						_this.memberlist = []
					}
				});
			},
			HelpStudDetail(){//前往助学师详情页
				var _this = this
				uni.navigateTo({
					url:'/pages/Other/Detailstutors/Detailstutors?user_id='+_this.payment_id+'',
					icon:'none',
					success:function(){//清除成员列表防止回来重复
						_this.memberlist = []
					}
				})
			},
			ToLivein(){//前往直播讲师页面
				let _this = this
				uni.navigateTo({
					url:'/pages/Other/LiveinStructor/LiveinStructor?user_id='+_this.payment_id+'',
					success:function(){//清除成员列表防止回来重复
						_this.memberlist = []
					}
				})
			},
			SendGift(){//赠送礼物弹窗
				let _this = this
				_this.IsPopu = false
				_this.IsGift = true
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userGift',
					actionName: 'query',
					data: '',
					successBack: function(res) {
						_this.cat_coin = uni.getStorageSync('cat_coin')
						_this.GiftList = res.data.data
						console.log(res)
						console.log(_this.cat_coin)
					},
				})
			},
			CloseFift(){//关闭礼物窗口
				this.IsGift = false
				this.GiftInfoSend = ''//清空选择
				this.GetValue = ''
			},
			SelectGift(e,ins){//选择礼物
				let _this = this
				_this.GiftListIndex = ins
				_this.GiftInfoSend = e
			},
			Addbuddy(){//添加好友
				var _this = this
				var userId = parseInt(uni.getStorageSync('user_id'))
				var data = {
					user_id:userId,
				}
				_this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryFreeFriendsCount',
					data: data,
					successBack: function(res) {
						console.log(res)
						_this.NumberOf = res.data.data.freeCount
						uni.showModal({
							title: '提示',
							content: '你需要送一份见面礼表示诚意(每天3次加好友免费,还剩'+_this.NumberOf+'次)',
							 cancelText:'我在想想',
							success: function (res) {
								if (res.confirm) {
									if(_this.NumberOf == '0'){
										uni.showToast({
											title:'免费加好友次数已用完',
											icon:'none'
										})
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});			
					}
				})
				
			},
			GetInputValue(e){
				var thsss = e.detail.value
				this.GetValue = parseInt(thsss);		
			},
			sendGiftToStudent(){//发送礼物
				let _this = this
				console.info(this.GetValue,'输入框的值')
				console.info(this.GiftInfoSend,'送的礼物')
				if(this.GetValue == '' || this.GiftInfoSend == ''){
					uni.showToast({
						title:'请输入礼物数量或者选择要送的礼物',
						icon:'none'
					})
				}else{
					console.info(_this.payment_id,'99090')
					console.info('赠送礼物')
					var userId = parseInt(uni.getStorageSync('user_id'))
					var data = {
						type_id:_this.GiftInfoSend.id,
						type:'gift',
						source:'class',
						pay_id:_this.pay_id ,
						user_id:userId,
						is_group: false,
						payment_ids:_this.payment_id,
						gift_count:_this.GetValue,
						pay_count:_this.GetValue*_this.GiftInfoSend.amount,					
					}
					_this.myAjaxNewPost({//获取我的班级列表
						model: 'user',
						controllerName: 'userOrder',
						actionName: 'insert',
						data: data,
						successBack: function(res) {
							console.log(res,'赠送了啊')
						},
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	page{
		background-color: #FFFFFF!important;
	}
	.memer_lsiat{
		position: relative;
		width: 100%;
	}
	.memberlist{
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.member_listss{
		display: flex;
		width: 100%;
		height: 160upx;
		margin: 0 auto;
		border-top: 1px #DCDCDC solid;
		align-items: center;
		background: #FFFFFF;
	}
	.memberlist:last-child{
	  border-bottom:1px #DCDCDC solid;
	}
	.member_listss image{
		width: 100upx;
		height: 100upx;
		border-radius: 100upx;
		margin-left: 4%;
		
	}
	.member_info{
		display: flex;
		flex-wrap:wrap;
		width: 70%;
		flex-direction:row-reverse;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		height: 100upx;
		padding-left: 2%;
	}
	.member_info>view{
		display: flex;
		width: 100%;
		height: 27upx;
	}
	.member_name{
		font-size: 20upx;
	}
	.member_identity{
		font-size: 18upx;
		height: 40upx;
		line-height: 20px;
		/* border: 1px #DCDCDC solid; */
		color: #06C1AE;
		border-radius: 10upx;
		margin-left: 4%;
	}
	.member_sex{
		width: 25upx!important;
		height: 25upx!important;
		padding-left: 24%;
		padding-bottom: 15upx;
	}
	.member_language{
		font-size: 18upx;
		color: #BEBEBE;
	}
	.member_city{
		font-size: 18upx;
	}
	.online_state{
		display: flex;
		align-items:center;
		font-size: 26rpx;
		color: #BEBEBE;
	}
	.local_time{
		display: flex;
		width: 90upx;
		height: 30upx;
		justify-content: space-between;
		background: #CDC9C9;
		text-align: center;
		position: absolute;
		left: 20upx;
		font-size: 20upx;
		border-radius: 20upx;
		margin-top: 40upx;
	}
	.local_time image{
		width: 20upx;
		height: 20upx;
		border-radius: 20upx;
	}
	/*离线人员灰度处理*/
	.Thegray{
		background: rgba(192,192,192,0.4);
	}
	
	/*学员信息样式*/
	.student-infor{
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.member_lists{
		display: flex;
		width: 90%;
		height: 160upx;
		margin: 0 auto;
		border-top: 1px #DCDCDC solid;
		align-items: center;
	}
	.memberlist:last-child
	{
	  border-bottom:1px #DCDCDC solid;
	}
	.member_lists image{
		width: 60upx;
		height: 60upx;
		border-radius: 60upx;
	}
	.member_info{
		display: flex;
		flex-wrap:wrap;
		width: 70%;
		flex-direction:row-reverse;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		height: 100upx;
		padding-left: 2%;
	}
	.member_info>view{
		display: flex;
		width: 100%;
		height: 27upx;
	}
	.member_name{
		font-size: 20upx;
	}
	.member_identity{
		font-size: 18upx;
		height: 40upx;
		line-height: 20px;
		/* border: 1px #DCDCDC solid; */
		color: #06C1AE;
		border-radius: 10upx;
		margin-left: 4%;
	}
	.member_sex{
		width: 25upx!important;
		height: 25upx!important;
		padding-left: 24%;
		padding-bottom: 15upx;
	}
	.member_language{
		font-size: 18upx;
		color: #BEBEBE;
	}
	.member_city{
		font-size: 18upx;
	}
	.online_state{
		display: flex;
		align-items:center;
		font-size: 26rpx;
		color: #BEBEBE;
	}
	.local_time{
		display: flex;
		width: 10%;
		height: 20upx;
		justify-content: space-between;
		background: #CDC9C9;
		text-align: center;
		position: absolute;
		left: 20upx;
		font-size: 18upx;
		border-radius: 10upx;
		margin-top: 40upx;
	}
	.local_time image{
		width: 20upx;
		height: 20upx;
		border-radius: 20upx;
	}
	//弹窗样式
	.PuoPo{
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,0.4);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.Popo-avatar{
		width: 120upx;
		height: 120upx;
		border-radius: 60upx;
		background: rgba(192,192,192,0.7);
		position: absolute;
		top: -60rpx;
		left: 40%;
	}
	.PuoPo-content{
		width: 86%;
		height: 700upx;
		background: #FFFFFF;
		color: #000000;
		position: absolute;
		top: 10%;
		text{
			position: relative;
			width: 100%;
			height: 40upx;
			display: flex;
			justify-content: center;
			margin-top: 100upx;
		}
	}
	.Pupo-Address{
		position: relative;
		width: 100%;
		height: 120upx;
		text-align: center;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size:26upx;
		// color:#E7E7E7;
		view{
			position: relative;
			top: 50%; /*偏移*/
			transform: translateY(-50%);	
			display: flex;
			height: 100%;
			align-items: center;
			justify-content: center;
			padding-left:30upx;
		}
		image{
			width: 30upx;
			height: 40upx;
			padding-left:30upx;
		}
	}
	.signature{
		display: flex;
		width: 100%;
		height: 80upx;
		font-size: 28upx;
		justify-content: center;
		align-items: center;
	}
	.Gift-Addfriend{
		display: flex;
		width: 100%;
		height: 140upx;
		justify-content:center;
		view{
			display:flex;
			flex-wrap:wrap;
			justify-content: center;
			align-items: center;
			text{
				position: relative;
				margin: 0 auto;
				font-size: 26upx;
				// color: #EBECED;
			}
		}
		align-items:center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.IShelp{
	display: flex;
	width: 100%;
	height: 230upx;
	justify-content:center;
	font-size:28upx;
	view{
		display:flex;
		width:100%;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		text{
			position: relative;
			margin: 0 auto;
		}
	}
	align-items:center;
	image{
		width: 60upx;
		height: 60upx;
	}	
	}
	/*赠送礼物的样式*/
	.IsGift{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.GiftInfo{
		width: 100%;
		height: 560upx;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.GiftInfo-header{
		display: flex;
		width: 90%;
		border-bottom: 1upx solid #E4E4E4;
		text-align: center;
		align-items: center;
		justify-content: center;
		height: 100upx;
		margin: 0 auto;
		.GiftInfo-headerchlid{
			flex: 1;
		}
		image{
			width: 20upx!important;
			height: 20upx!important;
		}
	}
	.GiftInfos{
		display: flex;
		width: 100%;
		height: 300upx;
		white-space: nowrap;//滚动属性
		 margin: 0 auto;
		.GiftInfos-child{
			width: 24%;
			margin-right: 20upx;
			display: inline-block;
			vertical-align: top;
			.GiftInfos-pic{
				width: 100%;
				 display: inline-block;
				 text-align:center;
				 image{
					width: 110upx;
					height: 120upx;
					border-radius: 6upx;
				 }
			}
			.GiftInfos-title {
				display: block; // 让字体换行
				width: 90%;
				font-size: 30upx;
				line-height: 40upx;
				text-align: center;
				padding-bottom: 20rpx;
			}
		}	
	}
	.Giftactive{//点击选中礼物后的样式
		border: 1upx solid #06C1AE;
	}
	.SendButon{
		display: flex;
		width: 40%;
		height: 80upx;
		border: 1upx solid #00BCBB;
		border-radius: 40upx;
		position:absolute;
		right:20upx;
		bottom:20upx;
		input{
			width: 60%;
			height: 100%;
			color: #00BCBB;
			padding-left: 20upx;
		}
		view{
			width: 40%;
			background: #00BCBB;
			line-height: 80upx;
			text-align: center;
		}
	}
</style>
